<template>
    <div class="body cusTomer">
        <div class="searchbox">
            <span @click="opentimepicker1">{{begintime}}</span>
            <i>-</i>
            <span @click="opentimepicker2">{{overtime}}</span>

            <div>
                <input type="text" placeholder="姓名/手机号" v-model="searchText">
                <img src="../img/per_search.png" alt="" @click="searchBtn()">
            </div>
        </div>

        <ul class="tabNav">
            <li :class="{tab_active:iscur==0}" @click="producttype(0)">
                <div>贷款</div>
            </li>
            <li :class="{tab_active:iscur==1}" @click="producttype(1)">
                <div>信用卡</div>
            </li>
        </ul>
        <div class="conten_box" v-show="iscur==0">
            <ul class="conten_tab">
                <li :class="{cont_active:ifactive==0}" @click="orderstatus(0)">全部</li>
                <li :class="{cont_active:ifactive==1}" @click="orderstatus(1)">进行中</li>
                <li :class="{cont_active:ifactive==2}" @click="orderstatus(2)">已结算</li>
                <li :class="{cont_active:ifactive==3}" @click="orderstatus(3)">审核失败</li>
            </ul>
            <div class="ctn_wrap">
                <div class="ctn_wrapli" v-for="(item,index) in orderList" :key="index">
                    <div class="cwp_top"><span>{{item.name}}</span> <i>{{item.phone}}</i>
                        <p>{{item.status}}</p></div>
                    <div class="cwp_cen">
                        <div class="cwc_lef"><img :src="item.img" alt=""></div>
                        <div class="cwc_cen">
                            <p>{{item.proname}}</p>
                            <p>放款额度：{{item.amount}}</p>
                        </div>
                        <div class="cwc_rig">
                            <p>{{item.yongjin}}</p>
                        </div>
                    </div>
                    <div class="cwp_btm">时间：{{item.time}}</div>
                </div>
                <div class="addmore" v-html="addmore" @click="addmorefun()"></div>
                <div style="height: 1rem;"></div>
            </div>
        </div>
        <div class="conten_box" v-show="iscur==1">
            <ul class="conten_tab">
                <li :class="{cont_active:ifactive==0}" @click="orderstatus(0)">全部</li>
                <li :class="{cont_active:ifactive==1}" @click="orderstatus(1)">进行中</li>
                <li :class="{cont_active:ifactive==2}" @click="orderstatus(2)">已结算</li>
                <li :class="{cont_active:ifactive==3}" @click="orderstatus(3)">审核失败</li>
            </ul>
            <div class="ctn_wrap">
                <!--<div class="ctn_wrapli">-->
                <!--<div class="cwp_top"><span>王建兴</span> <i>18500810243</i> <p>审核中</p></div>-->
                <!--<div class="cwp_cen">-->
                <!--<div class="cwc_lef"><img src="../images/pro_img1.jpg" alt=""></div>-->
                <!--<div class="cwc_cen">-->
                <!--<p>交通银行 360借条</p>-->
                <!--<p>放款：100万</p>-->
                <!--</div>-->
                <!--<div class="cwc_rig">-->
                <!--<p>+168</p>-->
                <!--</div>-->
                <!--</div>-->
                <!--<div class="cwp_btm">时间：2019年03月26日 12:00:00</div>-->
                <!--</div>-->

                <div class="ctn_wrapli" v-for="(item,index) in orderList" :key="index">
                    <div class="cwp_top"><span>{{item.name}}</span> <i>{{item.phone}}</i>
                        <p>{{item.status}}</p></div>
                    <div class="cwp_cen">
                        <div class="cwc_lef"><img :src="item.img" alt=""></div>
                        <div class="cwc_cen">
                            <p>{{item.proname}}</p>
                            <p>核卡额度：{{item.amount}}</p>
                        </div>
                        <div class="cwc_rig">
                            <p>{{item.yongjin}}</p>
                        </div>
                    </div>
                    <div class="cwp_btm">时间：{{item.time}}</div>
                </div>
                <div class="addmore" v-html="addmore" @click="addmorefun()"></div>
                <div style="height: 1rem;"></div>
            </div>
        </div>

        <mt-datetime-picker
            v-model="pickerbeginValue"
            type="date"
            ref="picker1"
            year-format="{value}"
            month-format="{value}"
            date-format="{value}"
            hour-format="{value}"
            minute-format="{value}"
            @confirm="timebeginbtn"
        >
        </mt-datetime-picker>
        <mt-datetime-picker
            v-model="pickerlaterValue"
            type="date"
            ref="picker2"
            year-format="{value}"
            month-format="{value}"
            date-format="{value}"
            hour-format="{value}"
            minute-format="{value}"
            @confirm="timelaterbtn"
        >
        </mt-datetime-picker>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default {
        name: "cusTomer",
        mounted() {
            this.$store.state.navTabstatu = 0;
            this.getorderList(0);

            //时间初始化
            this.datachushihua();
        },
        data() {
            return {
                iscur: 0,
                ifactive: 0,
                pickerbeginValue: "",
                pickerlaterValue: "",
                smallData: "",
                begintime: "开始时间",
                overtime: "结束时间",
                addmore: "加载更多...",
                searchText:"",
                pagenomber:0,

                productList: [
                    {
                        name: "姜海飞",
                        phone: "17610988656",
                        status: "审核成功",
                        img: "",
                        proname: "360借条",
                        amount: "7",
                        yongjin: "+2000",
                        time: "2019-05-06 13:43:11"
                    },
                    {
                        name: "尹大伟",
                        phone: "18810225784",
                        status: "审核成功",
                        img: "http://zadai.net:8006/uploads/share/%E5%BE%AE%E9%87%91%E4%B8%80%E5%8F%B7.png",
                        proname: "微金贷",
                        amount: "12",
                        yongjin: "+3000",
                        time: "2019-05-01 17:23:23"
                    },
                    {
                        name: "谭俊浩",
                        phone: "13436684496",
                        status: "审核失败",
                        img: "http://zadai.net:8006/uploads/share/%E6%8B%8D%E6%8B%8D%E8%B4%B7.jpg",
                        proname: "拍拍贷",
                        amount: "5",
                        yongjin: "0",
                        time: "2019-04-26 15:43:26"
                    },
                    {
                        name: "郭晓军",
                        phone: "15201197612",
                        status: "审核成功",
                        img: "http://zadai.net:8006/uploads/share/%E6%98%93%E7%BE%8E%E4%BB%98.jpg",
                        proname: "易美付",
                        amount: "3",
                        yongjin: "+800",
                        time: "2019-04-26 11:54:12"
                    },
                    {
                        name: "刘鹏",
                        phone: "18803342125",
                        status: "审核成功",
                        img: "http://zadai.net:8006/uploads/share/%E7%BB%B4%E4%BF%A1%E7%8E%B0%E8%B4%B7.jpg",
                        proname: "维信现贷",
                        amount: "5",
                        yongjin: "+2000",
                        time: "2019-04-23 15:32:45"
                    }
                ],
                productListxinyong: [
                    {
                        name: "江林",
                        phone: "15718880552",
                        status: "审核成功",
                        img: "http://zadai.net:8006/uploads/share/%E4%B8%8A%E6%B5%B7%E9%93%B6%E8%A1%8C%E4%BF%A1%E7%94%A8%E5%8D%A1.jpg",
                        proname: "上海银行信用卡",
                        amount: "3",
                        yongjin: "+1200",
                        time: "2019-05-08 14:32:11"
                    },
                    {
                        name: "肖旭东",
                        phone: "18810225784",
                        status: "审核失败",
                        img: "http://zadai.net:8006/uploads/share/%E4%B8%AD%E4%BF%A1%E9%93%B6%E8%A1%8C%E4%BF%A1%E7%94%A8%E5%8D%A1.jpg",
                        proname: "中信银行信用卡",
                        amount: "5",
                        yongjin: "0",
                        time: "2019-05-02 13:23:23"
                    },
                    {
                        name: "王怡",
                        phone: "13836684496",
                        status: "审核成功",
                        img: "http://zadai.net:8006/uploads/share/%E6%B0%91%E7%94%9F%E9%93%B6%E8%A1%8C%E4%BF%A1%E7%94%A8%E5%8D%A1.jpg",
                        proname: "民生银行",
                        amount: "2",
                        yongjin: "+1000",
                        time: "2019-04-23 10:21:32"
                    },
                    {
                        name: "刘璐",
                        phone: "15801197612",
                        status: "审核成功",
                        img: "http://zadai.net:8006/uploads/share/%E4%B8%AD%E4%BF%A1%E9%93%B6%E8%A1%8C%E4%BF%A1%E7%94%A8%E5%8D%A1.jpg",
                        proname: "易美付",
                        amount: "6",
                        yongjin: "+2000",
                        time: "2019-04-25 11:12:12"
                    }
                ],
                orderList:[]
            }
        },
        methods: {
            //初始化时间
            datachushihua(){
                let date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                this.pickerbeginValue = Y + M + D;
                let nextDate = new Date(date.getTime() + 24*60*60*1000); //后一天
                let Y1 = nextDate.getFullYear() + '-';
                let M1 = (nextDate.getMonth() + 1 < 10 ? '0' + (nextDate.getMonth() + 1) : nextDate.getMonth() + 1) + '-';
                let D1 = (nextDate.getDate() < 10 ? '0' + nextDate.getDate() : nextDate.getDate()) + ' ';
                this.pickerlaterValue = Y1 + M1 + D1;
            },
            //产品类型切换
            producttype(type){
                this.iscur = type;
                this.ifactive = 0;
                this.pagenomber = 0;
                this.orderList = [];
                this.getorderList(0);
            },
            //订单状态切换
            orderstatus(status){
                this.pagenomber = 0;
                this.ifactive = status;
                this.orderList = [];
                this.getorderList(0);
            },
            //开始时间开启
            opentimepicker1() {
                this.$refs.picker1.open();
            },
            //结束时间开启
            opentimepicker2() {
                this.$refs.picker2.open();
            },
            //开始时间回调
            timebeginbtn(val) {
                this.smallData = val;
                this.begintime = this.timegetTime(val);
                let data1 = new Date(val)
                let date = new Date(data1.getTime() + 24*60*60*1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                this.overtime = Y + M + D;
            },
            //结束时间回调
            timelaterbtn(val) {
                if (val <= this.smallData) {
                    return Toast({
                        message: '结束时间要大于开始时间',
                        position: 'middle',
                        duration: 2000
                    });
                }
                console.log(this.timegetTime(val));
                this.overtime = this.timegetTime(val);
            },
            //翻页
            addmorefun(){
                this.pagenomber++;
                if(this.addmore=="加载更多..."){
                    this.getorderList(this.pagenomber);
                }
            },
            //时间转换
            timegetTime(timestamp) {
                let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';

                let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
                return Y + M + D;
            },
            //查找
            searchBtn(){
                this.pagenomber = 0;
                this.ifactive = 0;
                this.orderList = [];
                this.getorderList(0);
            },
            //产品列表
            getorderList(pageNum) {
                let beginData = '';
                if(this.begintime!='开始时间'){
                    beginData = this.begintime
                }
                let endData = '';
                if(this.overtime!='结束时间'){
                    endData = this.overtime
                }
                let newstatus = "";
                switch (this.ifactive) {
                    case 0:
                        newstatus = "";
                        break;
                    case 1:
                        newstatus = 0;
                        break;
                    case 2:
                        newstatus = 1;
                        break;
                    case 3:
                        newstatus = 2;
                        break;
                }
                this.axios({
                    method: 'post',
                    url: 'apis/getMyOrders',
                    data: {
                        beginDate: beginData,
                        endDate: endData,
                        pageNum: pageNum,
                        pageSize: 8,
                        productType: this.iscur,
                        searchStr: this.searchText,
                        status: newstatus
                    },
                    headers: {'token':JSON.parse(localStorage.hhrdata).token},
                    withCredentials: true,
                }).then((response) => {
                    console.log(response)
                    if(response.data.code==-8){
                        this.common.checkLogin(this);
                        return
                    }
                    if(response.data.code!=0){
                        Toast({
                            message: response.data.message,
                            position: 'center',
                            duration: 2000
                        });
                    }


                    response.data.data.dataList.forEach((value,index)=> {
                        // console.log(value);
                        //订单状态判断
                        let statustext = "";
                        switch(value.status){
                            case 0:
                                statustext="进行中";
                                break;
                            case 1:
                                statustext="审核成功";
                                break;
                            case 2:
                                statustext="审核失败";
                                break;
                        }
                        //返佣金额判断
                        let commissionAmount = 0;
                        if(value.commissionAmount){
                            commissionAmount = "+"+value.commissionAmount;
                        }
                        //贷款金额判断
                        let loanAmount = 0;
                        if(value.loanAmount){
                            loanAmount = value.loanAmount;
                        }
                        this.orderList.push({
                            name: value.name,
                            phone: value.mobile,
                            status: statustext,
                            img: "http://zadai.net:8006"+value.image,
                            proname: value.pname,
                            amount: loanAmount,
                            yongjin: commissionAmount,
                            time: value.creationTime
                        })
                    });

                    //清空时间和搜索内容
                    this.begintime = "开始时间";
                    this.overtime = "结束时间";
                    this.searchText = "";

                    if(response.data.data.totalPage > pageNum+1 ){
                        this.addmore = "加载更多...";
                    }else{
                        this.addmore = "暂无更多";
                    }
                }).catch((error) => {
                    console.log(error);
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .cusTomer {

        background: rgba(244, 244, 244, 1);

        .searchbox {
            background: #fff;
            height: 0.8rem;
            padding: 0 0.27rem;

            i {
                float: left;
                line-height: 0.7rem;
                height: 0.6rem;
                text-align: center;
                color: rgba(151, 151, 151, 1);
                margin: 0 0.05rem;
            }

            span {
                width: 2rem;
                height: 0.6rem;
                background: rgba(238, 238, 238, 1);
                border-radius: 0.1rem;
                font-size: 0.26rem;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                float: left;
                margin: 0.1rem 0;
                text-align: center;
                line-height: 0.6rem;
                cursor: pointer;
                white-space: normal;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            div {
                width: 2.3rem;
                height: 0.6rem;
                background: rgba(238, 238, 238, 1);
                border-radius: 0.1rem;
                font-size: 0.26rem;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                float: right;
                margin: 0.1rem 0;
                text-align: center;
                line-height: 0.6rem;
                padding: 0 0 0 0.1rem;

                input {
                    float: left;
                    width: 1.7rem;
                    height: 0.5rem;
                    margin: 0.05rem;
                    border: 0;
                    background: transparent;
                    font-size: 0.26rem;
                    color: rgba(119, 119, 119, 1);
                }

                img {
                    cursor: pointer;
                    float: left;
                    width: 0.4rem;
                    height: 0.4rem;
                    padding: 0.1rem 0.05rem;
                }
            }
        }

        .conten_box {
            .conten_tab {
                height: 1rem;
                background: #fff;

                .cont_active {
                    border: 0.01rem solid rgba(26, 121, 250, 1);
                    color: rgba(26, 121, 250, 1);
                    background: rgba(239, 244, 255, 1);
                }

                li {
                    float: left;
                    height: 0.6rem;
                    width: 1.5rem;
                    line-height: 0.6rem;
                    text-align: center;
                    background: rgba(243, 243, 243, 1);
                    border: 0.01rem solid transparent;
                    border-radius: 0.04rem;
                    margin-left: 0.3rem;
                    margin-top: 0.2rem;
                    cursor: pointer;
                    font-weight: 500;
                    color: rgba(119, 119, 119, 1);
                }
            }

            .ctn_wrap {
                overflow: hidden;
                background: #f4f4f4;
            }

            .ctn_wrapli {
                width: 7rem;
                height: 3.4rem;
                margin: 0.2rem auto 0 auto;
                background: #fff;
                box-shadow: 0 0 0.1rem 0 rgba(154, 163, 183, 0.3);
                border-radius: 0.1rem;

                .cwp_top {
                    height: 0.74rem;
                    border-bottom: 0.01rem solid rgba(237, 237, 237, 1);
                    line-height: 0.74rem;
                    padding: 0 0.3rem;
                    font-size: 0.32rem;
                    font-weight: 500;
                    color: rgba(51, 51, 51, 1);

                    p {
                        float: right;
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: rgba(38, 119, 249, 1);
                    }
                }

                .cwp_cen {
                    height: 1.2rem;
                    padding: 0.3rem;
                    overflow: hidden;
                    border-bottom: 0.01rem solid rgba(237, 237, 237, 1);

                    .cwc_lef {
                        width: 1.2rem;
                        height: 1.2rem;
                        border-radius: 0.1rem;
                        float: left;
                        overflow: hidden;

                        img {
                            border-radius: 0.1rem;
                            width: 100%;
                        }
                    }

                    .cwc_cen {
                        margin-left: 0.2rem;
                        float: left;

                        p {
                            font-size: 0.32rem;
                            font-weight: 500;
                            color: rgba(51, 51, 51, 1);
                            line-height: 0.44rem;
                            margin-top: 0.1rem;
                        }
                    }

                    .cwc_rig {
                        float: right;

                        p {
                            font-size: 0.4rem;
                            font-weight: 500;
                            color: rgba(247, 98, 96, 1);
                            margin-top: 0.3rem;
                        }
                    }
                }

                .cwp_btm {
                    height: 0.8rem;
                    line-height: 0.8rem;
                    padding: 0 0.3rem;
                    color: rgba(153, 153, 153, 1);
                    font-size: 0.26rem;
                }
            }
        }

        .addmore {
            height: 0.8rem;
            text-align: center;
            line-height: 0.8rem;
            cursor: pointer;
        }
    }
</style>
